:root {
  --bg: #eef1f4;
  --panel: #ffffffdd;
  --chip: #f2f4f7;
  --chip-text: #444;
  --muted: #a3acb7;
  --primary: #2a9d8f;
  --green-soft: #c6dfd2;
}

.f8-root {
  min-height: 100vh;
  background: radial-gradient(1200px 800px at 80% 60%, #dfe9e6 0%, #eef1f4 55%, #eef1f4 100%);
  display: flex;
  flex-direction: column;
}

.f8-topbar {
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 16px;
}
.f8-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.f8-logo-mark {
  width: 24px; height: 24px; border-radius: 6px; background:#2b584e;
}
.f8-menu { display: flex; gap: 18px; margin-left: 12px; }
.f8-menu a { color:#333; text-decoration:none; font-weight:600; }
.f8-menu .active { color: white; background:#2b8a6e; padding:8px 14px; border-radius:20px; }

.f8-chipbar {
  display: flex; flex-wrap: wrap; gap: 12px; padding: 8px 20px 0 20px;
}
.f8-chip {
  background: var(--chip);
  color: var(--chip-text);
  padding: 8px 14px;
  border-radius: 22px;
  display: inline-flex; align-items:center; gap: 10px;
}
.f8-chip .close { color:#8892a0; }
.f8-chip.primary { background:#eaf6f2; color:#256a60; }

.f8-subbar {
  display:flex; align-items:center; gap: 12px; padding: 8px 20px; border-top:1px solid #e6eaee;
}
.f8-pill {
  background:white; border:1px solid #e6eaee; border-radius:20px; height:36px; display:flex; align-items:center; padding:0 8px; gap:8px;
}
.f8-icon-btn { width:32px; height:32px; border-radius:50%; background:white; border:1px solid #e6eaee; display:flex; align-items:center; justify-content:center; }

.f8-content { flex:1; padding: 12px 20px 100px 20px; }
.f8-cells { display:flex; gap: 40px; padding-top: 24px; }
.f8-cell {
  width: 160px; height:160px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #d7efe1, #b9d3c0);
  display:flex; align-items:center; justify-content:center; box-shadow: inset 0 0 0 2px #c9d9cf66;
}
.f8-cell .label { text-align:center; color:#385e53; font-weight:700; letter-spacing:1px; }
.f8-cell .label small { display:block; font-weight:500; color:#2a5147; margin-bottom:4px; }

.f8-segment-buttons { display:flex; flex-direction:column; gap: 16px; }
.f8-segment-btn {
  width: 140px;
  height: 80px;
  border-radius: 16px;
  border: none;
  background: #f3f4f6;
  color: #6b7280;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.f8-segment-btn:hover {
  background: #e5e7eb;
}
.f8-segment-btn.active {
  background: #2b8a6e;
  color: white;
}

.f8-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #e6eaee;
  padding-bottom: 8px;
}
.f8-tab {
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: #6b7280;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
}
.f8-tab:hover {
  background: #f9fbfc;
}
.f8-tab.active {
  color: #2b8a6e;
  background: #eaf6f2;
  border-bottom: 2px solid #2b8a6e;
}
.f8-tab-content {
  flex: 1;
}

.f8-dock {
  position: fixed; left:0; right:0; bottom:0; height:72px; background: linear-gradient(180deg, #e8edf1 0%, #dbe2e8 100%);
  border-top: 1px solid #cfd6dd;
  display:flex; align-items:center; justify-content:center; gap:16px;
}
.f8-dock .dock-chip { position:absolute; left:16px; bottom:16px; background:white; border-radius:22px; padding:10px 16px; border:1px solid #e1e6ec; }
.f8-dock .btn { width:40px; height:40px; border-radius:50%; background:white; border:1px solid #e1e6ec; display:flex; align-items:center; justify-content:center; }

@media (max-width: 900px) {
  .f8-cells { gap: 20px; }
  .f8-cell { width:130px; height:130px; }
}

